<template>
  <div class="solidx">
    <h2 class="solidx_title">
        {{solidData.title}}
    </h2>

    <ul class="solidx_warp_ul tydisplay">
        <li class="solidx_warp_li" v-for="(item,i) in solidData.list" :key="i">
            <div class="solidx_warp_li_img">
                <img :src="item.imgUrl" alt="">
            </div>
            <div class="solidx_warp_li_name">
                <h2>{{item.name}}</h2>
            </div>
            <div class="solidx_warp_li_content tydisplay">
                <p>
                    {{item.content}}
                </p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"solidx",
    props:["solidData"]
}
</script>

<style scoped>
.tydisplay{
    display: flex;
}
.solidx{
    padding: 35px 15px 0 15px;
    background: #3c9bfe;
}
.solidx_title{
    color: #fff;
    text-align: center;
    font-size: 1.8em;
}
.solidx_warp_ul{
    margin-top: 80px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.solidx_warp_li{
    background: #fff;
    border-radius: 12px;
    position: relative;
    width: 70%;
    margin-bottom: 90px;
}
.solidx_warp_li_img{
    position: absolute;
    top:-66px;
    left: 65px;
}
.solidx_warp_li_img>img{
    width: 70%;
}
.solidx_warp_li_name{
    margin: 80px 0 16px 0;
    text-align: center;
    color: #1d2845;
    font-size: 1em;
}
.solidx_warp_li_content{
    color: #6f7b8e;
    font-size: 1.2em;
    justify-content: center;
    margin-bottom: 45px;
}
.solidx_warp_li_content>p{
    width: 60%;
    display: inline-block;
    text-align: center;
    line-height: 1.5em;
}
</style>